<template>

  <el-dialog title="新增规则" :visible.sync="dialogFormVisible" width="700px">
    <div class="flex-colum-center">
      <el-form :model="form" ref="dialogForm" label-position="right" label-width="auto" :rules="rules">

        <el-form-item label="租赁用途" prop="leasePurpose" v-if="parentForm.leasePurpose==1">
          <el-select v-model="form.leasePurpose" clearable style="width: 260px" multiple>
            <el-option v-for="dict in rentalPurpose" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户标签" prop="customerSource" v-if="parentForm.customerSource==1">
          <el-select v-model="form.customerSource" clearable style="width: 260px" multiple>
            <el-option v-for="dict in customerSource" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户等级" prop="customerGrade" v-if="parentForm.customerGrade==1">
          <el-select v-model="form.customerGrade" clearable style="width: 260px" multiple>
            <el-option v-for="dict in customerLevel" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户属性" prop="clientProperty" v-if="parentForm.clientProperty==1">
          <el-select v-model="form.clientProperty" clearable style="width: 260px" multiple>
            <el-option v-for="dict in customerProperty" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="租期" prop="leaseTerms" v-if="parentForm.leaseTerm==1">
          <input-number-range v-model="form.leaseTerms" unit="月" :type="1"></input-number-range>
        </el-form-item>
        <el-form-item prop="units" v-if="parentForm.unitsStatus==1">
          <template slot="label">
            <div class="inline-flex">
              <span v-if="parentForm.unitsType>2">{{ parentForm.unitsDays }}天内</span>
              <dict-tag :options="creditReviewUnits" :value="parseInt(parentForm.unitsType)"/>
            </div>
          </template>
          <input-number-range v-model="form.units" unit="台"></input-number-range>
        </el-form-item>
        <el-form-item prop="amounts" v-if="parentForm.amountStatus==1">
          <template slot="label">
            <div class="inline-flex">
              <span v-if="parentForm.amountType>2">{{ parentForm.amountDays }}天内</span>
              <dict-tag :options="creditReviewAmount" :value="parseInt(parentForm.amountType)"/>
            </div>
          </template>
          <input-number-range v-model="form.amounts" unit="元" :toPrecision="2"></input-number-range>
        </el-form-item>

      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="saveSubmit">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>
import InputNumberRange from "@/components/InputNumberRange/index.vue";

export default {
  components: {
    InputNumberRange
  },

  props: [
    'rentalPurpose',
    'customerSource',
    'customerLevel',
    'customerProperty',
    'parentForm',
    'creditReviewUnits',
    'creditReviewAmount'
  ],
  data() {
    return {
      dialogFormVisible: false,
      type: 1,//1新增,2编辑
      index: -1,//当前编辑的下标
      units: [],
      amounts: [],
      leaseTerms: [],
      form: {
        leasePurpose: null,
        customerSource: null,
        clientProperty: null,
        customerGrade: null,
        minLeaseTerm: null,
        maxLeaseTerm: null,
        minUnits: null,
        maxUnits: null,
        minAmount: null,
        maxAmount: null,
        units: [],
        amounts: [],
        leaseTerms: [],
      },
      rules: {
        leasePurpose: [
          {required: true, message: '请选择租赁用途', trigger: 'change'},
        ],
        customerSource: [
          {required: true, message: '请选择客户标签', trigger: 'change'},
        ],
        clientProperty: [
          {required: true, message: '请选择客户属性', trigger: 'change'},
        ],
        customerGrade: [
          {required: true, message: '请选择客户等级', trigger: 'change'},
        ],
        leaseTerms: [
          {required: true, message: '请输入租期', trigger: 'change'},
        ],
        units: [
          {required: true, message: '请输入申请台数', trigger: 'change'},
        ],
        amounts: [
          {required: true, message: '请输入申请金额', trigger: 'change'},
        ],
      },
      currentRulesItem: {}
    }
  },
  // 方法集合
  methods: {
    saveSubmit() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          this.currentRulesItem = {
            leasePurpose: this.form?.leasePurpose?.join(','),
            customerSource: this.form?.customerSource?.join(','),
            clientProperty: this.form?.clientProperty?.join(','),
            customerGrade: this.form?.customerGrade?.join(','),
            minLeaseTerm: this.form.leaseTerms[0] ?? '',
            maxLeaseTerm: this.form.leaseTerms[1] ?? '',
            minUnits: this.form.units[0] ?? '',
            maxUnits: this.form.units[1] ?? '',
            minAmount: this.form.amounts[0] ?? '',
            maxAmount: this.form.amounts[1] ?? '',
            units: this.form.units,
            amounts: this.form.amounts,
            leaseTerms: this.form.leaseTerms,
          }
          this.$emit('success', {
            editIndex: this.index,
            type: this.type,
            rulesItem: this.currentRulesItem
          });
          this.close()
        }
      })
    },

    show(type, index, row) {
      this.dialogFormVisible = true
      this.type = type
      if (type == 2) {
        this.index = index
      }
      this.$nextTick(() => {
        this.$refs.dialogForm.resetFields()
        if (this.type == 2) {
          this.form = {...row}
          this.form.leasePurpose = this.form?.leasePurpose?.split(',')
          this.form.customerSource = this.form?.customerSource?.split(',')
          this.form.clientProperty = this.form?.clientProperty?.split(',')
          this.form.customerGrade = this.form?.customerGrade?.split(',')
          this.form.units = [this.form.minUnits ?? '', this.form.maxUnits ?? '']
          this.form.leaseTerms = [this.form.minLeaseTerm ?? '', this.form.maxLeaseTerm ?? '']
          this.form.amounts = [this.form.minAmount ? Number(this.form.minAmount) : '', this.form.maxAmount ? Number(this.form.maxAmount) : '']
        }
      })
    },
    close() {
      this.dialogFormVisible = false
    }
  },
  created() {
  },
  mounted() {
  },

}
</script>

<style lang="scss" scoped>
</style>
